<template>
  <div class="user-avatar-container" @click="toggleDropdown" ref="avatarContainer">
    <div class="avatar">
      <span class="avatar-text">{{ userInitials }}</span>
    </div>
    
    <div class="dropdown-menu" v-if="showDropdown">
      <div class="dropdown-header">
        <span class="user-name">{{ user.name }}</span>
        <span class="user-email">{{ user.email }}</span>
      </div>
      
      <div class="dropdown-divider"></div>
      
      <div class="theme-selector">
        <span class="dropdown-label">主题设置</span>
        <div class="theme-options">
          <button 
            class="theme-option" 
            :class="{ active: currentTheme === 'light' }" 
            @click="switchTheme('light')"
            title="浅色主题">
            🌞
          </button>
          <button 
            class="theme-option" 
            :class="{ active: currentTheme === 'dark' }" 
            @click="switchTheme('dark')"
            title="深色主题">
            🌙
          </button>
          <button 
            class="theme-option" 
            :class="{ active: currentTheme === 'blue' }" 
            @click="switchTheme('blue')"
            title="蓝色主题">
            🌊
          </button>
        </div>
      </div>
      
      <div class="dropdown-divider"></div>
      
      <button class="dropdown-item" @click="clearHistory">
        <span class="item-icon">🗑️</span>
        <span class="item-text">清空所有会话</span>
      </button>
      
      <button class="dropdown-item" @click="exportData">
        <span class="item-icon">📤</span>
        <span class="item-text">导出聊天记录</span>
      </button>
      
      <button class="dropdown-item" @click="aboutApp">
        <span class="item-icon">ℹ️</span>
        <span class="item-text">关于应用</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useChatStore } from '../store/chat';

// 获取聊天状态
const chatStore = useChatStore();
const { clearHistory: clearChatHistory } = chatStore;

// 模拟用户数据，实际应用中可能从用户服务获取
const user = ref({
  name: '用户',
  email: 'user@example.com',
  avatar: null
});

// 下拉菜单状态
const showDropdown = ref(false);
const avatarContainer = ref(null);

// 当前主题
const currentTheme = ref(localStorage.getItem('app_theme') || 'light');

// 切换下拉菜单
function toggleDropdown(event) {
  event.stopPropagation();
  showDropdown.value = !showDropdown.value;
}

// 切换主题
function switchTheme(theme) {
  currentTheme.value = theme;
  document.body.setAttribute('data-theme', theme);
  localStorage.setItem('app_theme', theme);
}

// 清空所有聊天记录
function clearHistory() {
  if (confirm('确定要清空所有聊天记录吗？此操作不可撤销。')) {
    // 避免调用同名方法导致递归
    chatStore.clearHistory();
    showDropdown.value = false;
  }
}

// 导出聊天数据
function exportData() {
  alert('导出功能即将上线');
  showDropdown.value = false;
}

// 关于应用
function aboutApp() {
  alert('AI 智能对话助手 v1.1.0\n基于大语言模型技术构建');
  showDropdown.value = false;
}

// 点击外部关闭下拉菜单
function closeDropdownOnClickOutside(event) {
  if (avatarContainer.value && !avatarContainer.value.contains(event.target)) {
    showDropdown.value = false;
  }
}

// 用户首字母头像
const userInitials = computed(() => {
  if (!user.value.name) return '?';
  return user.value.name.substring(0, 1).toUpperCase();
});

// 生命周期钩子
onMounted(() => {
  document.addEventListener('click', closeDropdownOnClickOutside);
  
  // 应用保存的主题
  const savedTheme = localStorage.getItem('app_theme');
  if (savedTheme) {
    document.body.setAttribute('data-theme', savedTheme);
    currentTheme.value = savedTheme;
  }
});

onBeforeUnmount(() => {
  document.removeEventListener('click', closeDropdownOnClickOutside);
});
</script>

<style scoped>
.user-avatar-container {
  position: relative;
  display: inline-block;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar:hover {
  background-color: var(--primary-hover);
  transform: scale(1.05);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 12px 0;
  z-index: 1000;
  animation: dropdown-fade 0.2s ease-in-out;
  border: 1px solid var(--border-color);
}

@keyframes dropdown-fade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-header {
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-color);
  margin-bottom: 4px;
}

.user-email {
  font-size: 13px;
  color: var(--text-secondary);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--border-color);
  margin: 8px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--text-color);
}

.dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.item-icon {
  margin-right: 12px;
  font-size: 16px;
}

.theme-selector {
  padding: 10px 16px;
}

.dropdown-label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.theme-options {
  display: flex;
  gap: 8px;
}

.theme-option {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background: none;
  font-size: 18px;
}

.theme-option:hover {
  transform: scale(1.1);
}

.theme-option.active {
  border-color: var(--primary-color);
}

/* 主题相关样式 */
body[data-theme="dark"] .dropdown-menu {
  background-color: #2d3748;
  border-color: #4a5568;
}

body[data-theme="dark"] .dropdown-divider {
  background-color: #4a5568;
}

body[data-theme="dark"] .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style> 